<!--
 * @author: Goalias
 * @since: 2025-01-06
-->
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router'
import { userMonitorApi, contentMonitorApi, abilityMonitorApi } from '@/apis/MonitorApi'
import { webUri } from '@/apis/types/Monitor'
import { ElMessage } from 'element-plus'
import { Timer, Bell } from '@element-plus/icons-vue'
import LineChart from '@/components/LineChart.vue';
import PulsatingButton from '@/components/ui/pulsating-button';


const route = useRoute()
const project = ref<string>(route.query.project as string)
const webUriMonitor = ref<webUri>()
const loading = ref<boolean>(false)

function initializeMonitors(project: string) {
    loading.value = true;
    switch (project) {
        case 'user':
            userMonitorApi.getWebUriMonitor().then(data => {
                webUriMonitor.value = data.data;
                loading.value = false;
            });
            break;
        case 'content':
            contentMonitorApi.getWebUriMonitor().then(data => {
                webUriMonitor.value = data.data;
                loading.value = false;
            });
            break;
        case 'ability':
            abilityMonitorApi.getWebUriMonitor().then(data => {
                webUriMonitor.value = data.data;
                loading.value = false;
            });
            break;
        default:
            ElMessage.warning('未知项目类型');
    }
}

// 监听路由参数的变化
watch(() => route.query.project, (newProject) => {
    project.value = newProject as string;
    initializeMonitors(project.value);
});

onMounted(() => {
    initializeMonitors(project.value);
});

const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: webUri
    rowIndex: number
}) => {
    if (parseInt(row.requestTimeMillisMax) > 1500) { // 大于1500ms
        return 'warning-row'
    } else if (row.errorCount !== null && row.errorCount !== '0') {
        return 'error-row'
    } else {
        return 'success-row'
    }
}
</script>

<template>
    <div class="web-uri-container">
        <div class="web-uri-header">
            <span>WebUri监控</span>
            <span>所属服务：{{ project }}</span>
            <PulsatingButton pulseColor="var(--theme-color)" duration="2s" class="refresh-button"
                @click="initializeMonitors(project)" type="button">
                刷新
            </PulsatingButton>
        </div>
        <div class="web-uri-body">
            <div v-if="loading">
                <el-skeleton :rows="10" />
            </div>
            <div v-else>
                <el-table :data="webUriMonitor" :border=true height="auto" :row-class-name="tableRowClassName">
                    <el-table-column label="请求耗时分布" min-width="100" type="expand" resizable>
                        <template #default="props">
                            <LineChart :yData="props.row.histogram" title="请求耗时分布图" />
                        </template>
                    </el-table-column>
                    <el-table-column fixed prop="uri" label="URI" min-width="150" resizable show-overflow-tooltip />
                    <el-table-column prop="requestCount" label="执行次数" resizable sortable />
                    <el-table-column label="上次执行时间" min-width="150" resizable sortable>
                        <template #default="scope">
                            <el-icon>
                                <timer />
                            </el-icon>
                            <span style="margin-left: 10px">{{ scope.row.lastAccessTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="requestTimeMillisMax" label="最大执行时间(ms)" resizable sortable />
                    <el-table-column prop="requestTimeMillisMaxOccurTime" label="最大执行时间发生时间" min-width="150" resizable
                        sortable>
                        <template #default="scope">
                            <el-icon>
                                <Bell />
                            </el-icon>
                            <span style="margin-left: 10px">{{ scope.row.requestTimeMillisMaxOccurTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="concurrentMax" label="最大并发数" resizable sortable />
                    <el-table-column prop="errorCount" label="错误次数" resizable sortable />
                </el-table>
            </div>
        </div>

    </div>
</template>

<style scoped>
.web-uri-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
}
</style>
